<template>
  <view class="container">
    <!-- 头部区域 -->
    <view class="header">
      <view class="logo">美味笋</view>
      <view class="search-bar">
        <input class="search-input" placeholder="请输入搜索关键词" />
        <button class="search-btn" disabled>搜索</button>
      </view>
    </view>

    <!-- 轮播图区域 -->
    <view class="swiper-container">
    <view class="swiper-wrapper">
      <view class="swiper-slide" v-for="(item, index) in bannerList" :key="index" @click.stop="goDetail(item)">
        <img class="swiper-image" :src="require(`@/assets/imgs/${item.src}`)" />      </view>
    </view>
    <!-- 如果需要分页器 -->
    <view class="swiper-pagination"></view>
 
    <!-- 如果需要导航按钮 -->
    <view class="swiper-button-prev">前</view>
    <view class="swiper-button-next">后</view>
  </view>
    <!-- 爆款商品展示区域 -->
    <view class="top-products">
      <view
        class="product"
        v-for="(product, index) in topProducts"
        :key="index"
        @click="goDetail(product)"
      >
        <img class="product-image" :src="require(`@/assets/imgs/${product.image}`)" mode="aspectFill" />
        <view class="product-info">
          <view class="product-title">{{ product.title }}</view>
          <view class="product-core"><span class="product-price">{{ product.price }}</span>
            <span class="more">查看详情</span></view>
        </view>
      </view>
    </view>
  </view>
  <view class="lastfoot">
    <Foot/>
  </view>
 
</template>  
    
<script>
import { mapActions } from 'vuex';  
import Foot from "@/components/Foot"
import swiper from 'swiper'
import "swiper/dist/css/swiper.min.css";
export default {
  components: {
    Foot
  },
  mounted() {
    this.updateNavCurrent('/')
    new swiper(".swiper-container", {
      spaceBetween: 30,
          effect: 'fade',
          autoplay: {
	          delay: 3000,
	          disableOnInteraction: false, // 取消鼠标操作后的轮播暂停【无操作轮播继续】【参考链接1】
	          stopOnLastSlide: false, // 在最后一页停止
	        },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }
    });
  },
  methods:{
    ...mapActions(['updateNavCurrent']),
    goDetail(item){
      let id = item.id||'1'
      let path =`/goodDetail/${id}`
      this.$router.push(path);
      
    },

  },
  data() {
    return {
      swiperOption: {
	      pagination:{
	      	el:'.swiper-pagination'
	      },
	      autoplay:{
		      delay:1000,
		      disableOnInteraction:false
	      }  	  
      },
      // 轮播图数据
      bannerList: [
        {id:1,src:"1.jpg"},
        {id:2,src:"2.jpg"},
        {id:3,src:"3.jpg"},
        {id:4,src:"4.jpg"},   
     ],
      // 爆款商品数据
      topProducts: [
        { id:1,
          image: "1.jpg",
          title: "自制酸笋",
          price: "¥6.5",
          size:"500g/袋"
        },
        { id:2,
          image: "2.jpg",
          title: "麻笋",
          price: "¥6.5",
          size:"500g/袋"
        },
        { id:3,
          image: "3.jpg",
          title: "绿竹笋",
          price: "¥6.5",
          size:"500g/袋"
        },
        { id:3,
          image: "1.jpg",
          title: "新鲜笋尖",
          price: "¥6.5",
          size:"500g/袋"
        },
      ],
    };
  },
};
</script>  
    
<style scoped lang="less">
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  overflow-y: auto;
  margin-bottom: 90px;
  
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-right:4px;
}

.search-bar {
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1;
  height: 30px;
  padding: 0 10px;
  border: 2px solid #ddd;
  border-radius: 6px;
}

.search-btn {
  width: 60px;
  height: 30px;
  background-color: #f56c6c;
  color: #fff;
  border: none;
  border-radius: 4px;
  margin-left: 10px;
}

.swiper-container {
  margin-bottom: 20px;
  width: 80vw;
  height: 40vh;
  border-radius: 10%;
  .swiper-image {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  .swiper-button-prev,
  .swiper-button-next
  {
    background:#1118e2;
    opacity: 0.5;
    // border:1px solid #ccc;
    font-size:14px;
    text-align: center;
  
  }
}

.top-products {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 20px;
  .product{
    width:150px;
    padding:10px;
    .product-image{
      width:100%;
      height:100px;
      margin-bottom:5px;
    }
    .product-info{
      display: flex;
      flex-direction: column;
      justify-content: center;
      justify-items: center;
      .product-title{
        font-weight: 500;
        font-size:18px;
        text-align: center;
        margin-bottom: 5px;
      }
      .product-core{
        display: flex;
        justify-content: center;
        .product-price{
          font-weight: 500;
          font-size:16px;
          color:#f56c6c;
          margin-right:5px;
        }
        .more{
          color: #2d54c9;
          font-size:14px;
        }

      }
      

    }
  }
  
}

</style>